<template>
  <div>
    <!-- 头部区域 -->
    <van-nav-bar title="云朵头条" style="background-color: pink;" fixed>
      <template v-slot:left>
        <!-- <img :src="$store.state.userPhoto" alt="" class="logo"> -->
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="#fff" @click="search()" />
      </template>
    </van-nav-bar>
    <!-- 导航栏 -->
    <div class="nav">
      <van-tabs v-model="activeId">
        <van-tab :title="item.name" :name="item.id" v-for="item in allChannel" :key="item.id" @change="getNewList()">
          <!-- 在van-tabs上修改v-model变量名(把active换成activeId)
             在van-tab绑定name属性和值(值为频道ID)
             点van-tab后,name值会自动绑定给v-model(vant组件内部实现的)-->
          <!-- 把激活的id值传给文章列表组件 -->
          <article-list :cid="activeId"></article-list>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="getMoreChannel"></van-icon>
    </div>
    <!-- 更多频道弹出框 -->
    <van-popup v-model="show" class="pannel">
      <!-- 更多频道组件 -->
      <!-- 注意关闭弹出框事件写在组件里 -->
      <more-channel :unCheckChannelList="unCheckChannel" :userChannelList="userChannel" @addChannelFn="add"
        @deleteChannelFn="remove" @closeFn="closeChannel" @changeChannel="change">
      </more-channel>
    </van-popup>
  </div>

</template>

<script>
import ArticleList from '../Home/components/ArtList.vue'
import MoreChannel from '@/components/MoreChannel.vue'
import { allChannelAPI, updataChannelAPI, userChannelAPI } from '@/api'
export default {
  comments: {
    ArticleList
  },
  data() {
    return {
      activeId: 0,
      // 所有频道列表
      allChannel: [],
      // 用户频道列表
      userChannel: [],
      // 文章列表
      articleList: [],
      // 弹出框状态
      show: false
    }
  },
  methods: {
    // 获取频道列表
    async getAllChannel() {
      const { data: res1 } = await allChannelAPI()
      this.allChannel = res1.data.channels
    },
    // 获取用户频道列表
    async getUserChannel() {
      const { data: res2 } = await userChannelAPI()
      // console.log(res2)
      this.userChannel = res2.data.channels
    },
    // 点击+图标触发事件
    getMoreChannel() {
      this.show = true
    },
    // 更新数据
    async update() {
      const newArr = this.userChannel.filter(object => Object.id !== 0)
      // 浅拷贝
      const theNewArr = newArr.forEach((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      const res = await updataChannelAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 增加频道
    // 存在问题:新增时名字被删除了,所以采用浅拷贝
    add(channelObj) {
      this.userChannel.push(channelObj)
      // 推荐频道不能传递
      this.update()
    },
    // 删除频道
    remove(channelObj) {
      const index = this.userChannel.findIndex(obj => obj.id === channelObj.id)
      this.userChannel.splice(index, 1)
      this.update()
    },
    // 点击进入频道-切换频道
    change(channelObj) {
      this.activeId = channelObj.id
    },
    // 关闭频道视图
    closeChannel() {
      this.show = false
    },
    // 跳转到搜索页面
    search() {
      this.$router.push('/search')
    }
  },

  created() {
    this.getAllChannel()
    this.getUserChannel()
  },
  components: {
    ArticleList,
    MoreChannel
  },
  computed: {
    // 未选的频道列表
    unCheckChannel() {
      const newArr = this.allChannel.filter(bigObj => {
        const index = this.userChannel.findIndex(smallObj => {
          return smallObj.id === bigObj.id
        })
        // 如果找到了
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      // 没选择的频道存入新数组中
      return newArr
    }
  }
}
</script>

<style >
.logo {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 45px;
  border-radius: 50%;
}

.nav {
  position: fixed;
  top: 45px;
  margin-bottom: 100px;

}

/* +号图标样式 */
.moreChannels {
  position: fixed;
  top: 60px;
  right: 8px;
  z-index: 999;
}

/* 弹出框样式 */
.pannel {
  width: 100vw;
  height: 100vh;
}
</style>
